<template>
  <div class="mine">
    <div class="minetop">
      <span class="photobox">
        <img :src="userinfodata.avatar_img" alt="" class="photo">
        <span class="topname">
          <span
            style="width:100px;text-overflow:ellipsis;white-space: nowrap;overflow: hidden;word-break: break-all">{{ userinfodata.wx_name }}</span>
          <span style="font-size:12px;" v-if="userinfodata.role == 2"
                v-copy="userinfodata.invitation">邀请码：{{ userinfodata.invitation }}</span>
          <span style="font-size:18px;font-weight:600;" v-if="userinfodata.role != 2"
                @click="$router.push('/accounts')">升级师傅</span>
          <span style="font-size:12px;">旺旺号：{{ userinfodata.taobao_name }}</span>
        </span>
      </span>
      <span class="iconbox">
        <img src="../assets/img/m_9.png" alt="" @click="generate_imgs">
        <img src="../assets/img/m_1.png" alt="" @click="onopen">
        <img src="../assets/img/m_2.png" alt="" @click="onMess">
      </span>
    </div>
    <div class="minecenter">
      <div class="moneybox">
        <span class="num">{{ userinfodata.task_num }}</span>
        <span class="numtext">完成单数</span>
      </div>
      <div class="moneybox" @click="onDeposit">
        <span class="num">{{ userinfodata.y_money }}</span>
        <span class="numtext">本佣金额</span>
      </div>
      <div class="moneybox another" @click="onFather">
        <span class="num">{{ userinfodata.b_money }}</span>
        <span class="numtext">师傅佣金</span>
      </div>
    </div>
    <div class="minefoot">
      <van-cell title="评价任务" icon="volume-o" is-link to="PJing"/>
      <van-cell title="资金明细" icon="balance-pay" is-link to="detail"/>
<!--      <van-collapse v-model="activeNames">-->
<!--        <van-collapse-item title="我的金库" name="1" icon="balance-pay">-->
<!--          <div class="mymoney">-->
<!--            <span style="margin-bottom:10px;">-->
<!--              <img src="../assets/img/m_1.jpg" alt="" @click="onDeposit">-->
<!--              <img src="../assets/img/m_2.jpg" alt="" @click="onFill">-->
<!--            </span>-->
<!--            <span>-->
<!--              <img src="../assets/img/m_3.jpg" alt="" @click="$router.push('/detail')">-->
              <!--<img src="../assets/img/m_4.jpg" alt="" @click="$router.push('/filling')">-->
<!--              <img src="../assets/img/m_4.jpg" alt="" @click="$toast('暂无补单功能！')">-->
<!--            </span>-->
<!--          </div>-->
<!--        </van-collapse-item>-->
<!--      </van-collapse>-->
      <van-cell title="徒弟" icon="setting-o" is-link to="activity"/>
      <van-cell title="我的资料" icon="notes-o" is-link to="profile"/>
      <van-cell v-show="userinfodata.taobao_name == '小海'" title="排行榜" icon="diamond-o" is-link to="ranking"/>
      <div style="width:80%;margin:10px auto;">
        <van-button type="danger" size="large" style="border-radius:10px;" @click="loginBack()">退出登录</van-button>
      </div>
    </div>
    <van-dialog v-model="xfq1" title="开启接单提醒">
      <viewer>
        <div style="display:flex;justify-content: center;align-items: center;margin-top:10px;">
          <img src="../assets/xfq.png" style="width:40%;" alt="">
        </div>
      </viewer>
    </van-dialog>

    <van-dialog v-model="fillDialog" title="补单" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
      <van-field v-model="fillval" clearable label="补单金额" left-icon="gold-coin" placeholder="请输入补单金额"/>
    </van-dialog>
    <!--    <van-dialog v-model="Dialogs" title="邀请好友">-->
    <!--      <viewer>-->
    <!--        <div style="display:flex;justify-content:center;align-items: center">-->
    <!--          <img src="../assets/7b7d52fe5189f9e00ddcaa6f7d34577.png" style="width:80%" alt="">-->
    <!--        </div>-->
    <!--      </viewer>-->
    <!--    </van-dialog>-->
    <van-popup v-model="showshadow" round>
      <div class="shadow">
        <!--         <div class="startBtn" @click="onopen">开启提醒</div>-->
        <div class="startBtn" @click="handleFocus">开启提醒</div>
      </div>
    </van-popup>
    <return></return>
    <Footer></Footer>
  </div>
</template>

<script>
import {getuserinfo, remindaddress, generate_img} from '../api/api';
import Footer from '../components/footer.vue'
import aestool from '@/utils/aestool.js';
import Return from "./returnone";
import AgainReturn from "./AgainReturn";
import axios from "axios";
export default {
  components: {AgainReturn, Return, Footer},
  data() {
    return {
      active: 0,
      xfq1:true,
      activeNames: ['0'],
      fillDialog: false,
      fillval: '',
      Dialogs: false,
      showshadow: false,
      userinfodata: {},
      remindDialog: false,
      generate_img: '',
      verifycode: "",
      show_img: false,
    }
  },
  created() {
    this.getUserData()
    // if(this.$route.query.code){
    //   sessionStorage.setItem('token',this.$route.query.t)
    //   let open = this.$route.query.code
    //   open == 1 ? this.remindDialog = true : open == 3 ? this.$toast('请使用同一个微信号授权!') : this.$toast('更新开通失败，请联系客服!')
    // }
  },
  methods: {
    loginBack(){
          window.localStorage.removeItem('xfq_token')
        this.$router.push('/Login')
    },
    levelmaster() {

    },
    //获取用户信息
    getUserData() {
      getuserinfo().then(res => {
        console.log('用户信息', res)
        if (res.data.Status == 200) {
          sessionStorage.setItem('useinfo', aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
          this.userinfodata = JSON.parse(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
          console.log('userdata', this.userinfodata)
          if (this.userinfodata.role == 2) {
            this.Dialogs = true
          }
        }
      })
    },
    generate_imgs() {
      if (this.userinfodata.role == 2) {
        this.$router.push('/generate_img')
      } else {
        this.$toast.fail('请先成为师傅！')
      }
    },
    onMess() {
      console.log('this.userinfodata.user_status', this.userinfodata.user_status)
      if (this.userinfodata.user_status == 1) {
        this.$router.push('/uploadImg')
      } else if (this.userinfodata.user_status == 2) {
        this.$toast('资料已完善！')
      } else if (this.userinfodata.user_status == 3) {
        this.$toast('账户已冻结！')
      } else if (this.userinfodata.user_status == 4) {
        this.$toast('资料正在审核中！')
      }
    },
    //生成随机数
    getNum() {
      var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
      var nums = ""
      for (var i = 0; i < 16; i++) {
        var id = parseInt(Math.random() * 61);
        nums += chars[id];
      }
      return nums
    },
    //补单
    onFill() {
      // this.fillDialog = true
      this.$toast('暂无补单功能！')
    },
    //确认补单
    onConfirm() {
      if (this.fillval == '') {
        this.$toast('补单金额不能为空！')
      } else {

      }
    },
    //取消补单
    onCancel() {
      this.fillDialog = false
    },
    //开启提醒
    onopen() {
      let str = this.getNum()
      let params = {
        authorized: aestool.encrypt('remind_begin', str),
        authorized_s: aestool.encrypt(str, '123Remindaddress'),
      }
      remindaddress(params).then(res => {
        let temp = aestool.decrypt(res.Data, '123Remindaddress')
        console.log('开启', temp)
        window.location.href = temp
      })
    },
    //佣金提现
    onDeposit() {
      if (this.userinfodata.y_money <= 0) {
        this.$toast('暂无可提现佣金!')
      } else {
        let item = {
          task_yjmoney: this.userinfodata.y_money
        }
        this.$router.push({
          name: 'withdrawal',
          params: {
            type: 'YJ',
            task: item
          }
        })
      }
    },
    onFather() {
      if (this.userinfodata.b_money <= 0) {
        this.$toast('暂无可体现佣金!')
      } else {
        let item = {
          task_yjmoney: this.userinfodata.b_money
        }
        this.$router.push({
          name: 'withdrawal',
          params: {
            type: 'SFYJ',
            task: item
          }
        })
      }
    },
    handleFocus() {

    }
  }
}
</script>

<style lang="stylus" scoped>
.mine {
  font-size 12px
  padding-bottom 50px

  .minetop {
    height 128px
    background url(../assets/img/minetop.jpg) no-repeat top center
    background-size cover
    display flex
    justify-content space-between
    align-items center
    padding 0 16px

    .photobox {
      display flex
      align-items center

      .topname {
        display flex
        flex-direction column
        color #fff
      }

      img {
        width 60px
        height 60px
        border 3px solid #ffffff
        border-radius 50%
        margin-right 10px
      }

      span {
        font-size 16px
      }
    }

    .iconbox {
      width 150px
      display flex
      justify-content space-around

      img {
        width 20px
        height 20px
        margin: 0 6px
      }
    }
  }

  .minecenter {
    display flex
    justify-content space-between
    align-items center
    padding 20px 0

    .moneybox {
      width 30%
      border-right 1px solid #ececec
      display flex
      flex-direction column
      align-items center
      padding 0 20px

      .num {
        font-size 20px
        color #333
        font-weight 600
        margin-bottom 10px
      }

      .numtext {
        font-size 16px
        color #9a9a9a
      }
    }

    .another {
      border-right 0
    }
  }

  .minefoot {
    .mymoney {
      padding 0 10px
      display flex
      flex-direction column

      span {
        display flex
        justify-content space-between
        align-items center
      }

      img {
        width 150px
        height 86px
      }
    }
  }

  .shadow {
    width 300px
    height 380px
    background url(../assets/img/remind.png) no-repeat top center
    background-size cover

    .startBtn {
      height 40px
      background-image linear-gradient(to right, #3b5bea, #5786ff)
      text-align center
      line-height 40px
      color #ffffff
      font-size 16px
      position absolute
      bottom 20px
      margin: 0 25px
      width 250px
      border-radius 20px
    }
  }

  .remindtop {
    height 300px

    .top {
      width 300px
      height 130px

      img {
        width 100%
      }
    }

    .succ {
      text-align center
      font-size 26px
      color #2e4eca
      padding 16px 0
    }

    .remindtext {
      text-align center
      color #666
      font-size 14px
    }

    .startBtn {
      height 40px
      background-image linear-gradient(to right, #3b5bea, #5786ff)
      text-align center
      line-height 40px
      color #ffffff
      font-size 16px
      position absolute
      bottom 20px
      margin: 0 25px
      width 250px
      border-radius 20px
    }
  }
}
</style>
<style lang="stylus" scoped>
.mine {
  .van-tabbar--fixed {
    position relative
  }

  [class*=van-hairline]::after {
    border 0
  }

  .van-cell:not(:last-child)::after {
    border 0
  }
}

.van-popup {
  background: #639 !important;
}

.yanzhengs {
  background: rebeccapurple;
  background-size: 100% 100%;
  height: 400px;
  width: 80%;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confirms {
  width: 80%;
  font-size: 16px;
  border-radius: 10px;
  height: 40px;
  position: absolute;
  bottom: 5%;
  left: 10%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}
</style>

